var myApp = angular.module("hello", ["ui.router"])
  .controller(
  "MainCtrl",
  class MainCtrl {
    constructor($scope) {
      this.$scope = $scope;
      function handleClick() {
        console.log(this.$scope);
      }
      $scope.handleClick = handleClick.bind(this);

      this.message = "Hello World!";
    }
    handleClick() {
      console.log(this.$scope);
    }
  }
);

myApp.config(
  /**
   * @param {import('@uirouter/angularjs').Ng1StateDeclaration} $stateProvider
   */
  function ($stateProvider) {
  // An array of state definitions
  /**
   * @type {import('@uirouter/angularjs').Ng1StateDeclaration[]} states
   */
  var states = [
    { name: 'hello', url: '/hello', component: 'hello' },
    { name: 'about', url: '/about', component: 'about' },
    
    { 
      name: 'people', 
      url: '/people', 
      component: 'people',
      // 自动触发 获取数据并绑定
      resolve: {
        // provide and as service
        people: function ($people) {
          return $people.getAllPeople();
        }
      }
    },
    
    { 
      name: 'people.person', 
      url: '/{personId}', 
      component: 'person',
      // use as controller
      resolve: {
        /// insert by parent-root
        person: function(people, $stateParams) {
          return people.find(function(person) { 
            return person.id === $stateParams.personId;
          });
        }
      }
    }
  ]
  
  // Loop over the state definitions and register them
  states.forEach(function(state) {
    $stateProvider.state(state);
  });
});


myApp.run(function($http, $uiRouter) {
  var Visualizer = window['@uirouter/visualizer'].Visualizer;
  $uiRouter.plugin(Visualizer);
  $http.get('//localhost:5327/people', { cache: true });
});